//导入 css
import "../../css/adminlte.min.css";
import "../../css/app.css";
import request from "../../utils/request";
import "../../base/checkLogin";
import "../../base/logout";
//获取元素
let tbody = document.querySelector("tbody");
let pageDiv = document.querySelector(".page");
let page = 1;
let totalPage = 1;
//发送 AJAX 请求
async function getUsers() {
  let data = await request.get(`/user`, {
    params: {
      page: page,
    },
  });
  //处理获取到的数据
  //遍历数组 拼接 html
  let html = "";
  data.users.forEach((item) => {
    html += `<tr>
                  <td>${item._id}</td>
                  <td>${item.uname}</td>
                  <td>
                    <img
                      width="30"
                      src="http://127.0.0.1:8080${item.profile}"
                      alt=""
                    />
                  </td>
                  <td>${item.create_at}</td>
                  <td>${item.last_login}</td>
                  <td>
                    <a href="/userEdit.html?id=${item._id}" type="button" class="btn btn-info btn-sm">
                      修改
                    </a>
                    <button uid="${item._id}" type="button" class="btn btn-danger btn-sm del">
                      删除
                    </button>
                  </td>
                </tr>`;
  });
  //将拼接好的 html 设置到 tbody 中
  tbody.innerHTML = html;
  //根据总的页码数 拼接页码的标签
  totalPage = Math.ceil(data.count / 10);
  //循环创建页码
  let pageStr = `<ul class="pagination">
    <li class="paginate_button page-item ${page == 1 ? 'disabled' : ''}">
      <a href="#" class="page-link prev">上一页</a>
    </li>`;
  //循环
  for(let i=1;i<=totalPage;i++){
    pageStr += `<li class='paginate_button page-item ${i == page ? 'active' : ''}'}>
                <a href="#" class="page-link num-link">${i}</a>
              </li>`
  }
  
  pageStr += `<li class="paginate_button page-item next ${page == totalPage ? 'disabled' : ''}">
      <a class="page-link next">下一页</a>
    </li>
    </ul>`;
  //插入 page 位置
  pageDiv.innerHTML = pageStr;
}

getUsers();

//删除按钮绑定事件   事件委派 给父级元素绑定事件
tbody.onclick = async function (e) {
  //判断点击的元素
  // console.log(e.target); //获取事件源的
  if (e.target.classList.contains("del")) {
    //获取按钮的 id
    let id = e.target.getAttribute("uid");
    //点击了删除按钮  发送 AJAX
    await request.delete("/user/" + id);
    //提示
    alert("删除成功");
    //更新列表
    getUsers();
  }
};

//为分页的页码绑定事件
pageDiv.onclick = function(e){
  //阻止点击 a 链接跳转
  e.preventDefault();
  //判断当前点击的是否为数字页码
  if(e.target.classList.contains('num-link')){
    //获取页码的文本
    let p = e.target.innerHTML;
    //修改全局的页码数
    page = p;
    //调用 getUser 函数 重新获取数据
    getUsers();
  }
  //判断点击是否为上一页
  if(e.target.classList.contains('prev')){
    if(page > 1){
      page -= 1;
      getUsers();
    }
  }

  //判断点击是否为下一页
  if(e.target.classList.contains('next')){
    if(page < totalPage){
      page += 1;
      getUsers();
    }
  }
}

